<!--
 * @Descripttion: 
 * @version: 
 * @Author: anan
 * @Date: 2020-10-02 14:33:17
 * @LastEditors: anan
 * @LastEditTime: 2020-10-03 17:14:49
-->
<template>
  <div>
    <van-tabs>
      <van-tab v-for="item in items" :key="item.id" :title="item.title">
        <van-search
          v-model="value"
          show-action
          shape="round"
          placeholder="请输入查询日期"
          @focus="searchFocus"
        >
          <template #action>
            <div @click="onSearch">搜索</div>
          </template>
        </van-search>

        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
          <vxe-table
            border
            show-header-overflow
            show-overflow
            highlight-hover-row
            :align="allAlign"
            :data="tableData"
          >
            <vxe-table-column
              type="seq"
              title="序号"
              width="60"
            ></vxe-table-column>
            <vxe-table-column field="name" title="Name"></vxe-table-column>
            <vxe-table-column field="sex" title="Sex"></vxe-table-column>
            <vxe-table-column field="age" title="Age"></vxe-table-column>
            <vxe-table-column
              field="address"
              title="Address"
            ></vxe-table-column>
          </vxe-table>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>

    <!-- 日期组件 -->
    <transition name="van-slide-up">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="选择年月日"
        v-show="show"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="onConfirm"
        @cancel="onCancel"
      />
    </transition>
  </div>
</template>

<script>
import vTable from './table/table.vue'

export default {
  components: {
    vTable
  },
  data() {
    return {
      count: 0,
      isLoading: false,
      value: '',
      items: [
        { id: 1, title: '库存源', content: '' },
        { id: 2, title: '业绩', content: '' }
      ],
      allAlign: null,
      tableData: [
        { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'vxe-table 从入门到放弃' },
        { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
        { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
        { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women ', age: 24, address: 'Shanghai' }
      ],
      show: false,
      minDate: new Date(2018, 0, 1),
      maxDate: new Date((new Date()).getTime() - 24 * 60 * 60 * 1000),
      currentDate: new Date()
    }
  },
  methods: {
    onRefresh() {
      setTimeout(() => {
        ++this.count
        this.$toast('刷新成功' + this.count)
        this.isLoading = false
      }, 1000)
    },
    searchFocus() {
      this.show = true
    },
    onConfirm(date) {
      this.show = false
      this.value = this.$moment(date).format('YYYYMMDD')
    },
    onSearch(val) {
      // console.log('开始查询数据，查询时间为' + val)
    },
    // 时间取消按钮
    onCancel() {
      this.show = false
    }
  }
}
</script>
